<template>
	<div>
		<h3>toRaw、markRaw</h3>
		<b>修改数据只是页面不刷新，实际还是改变了，这破玩意有毛用？</b>
		<div>
			<p>{{ data }}</p>
			<button @click="fun_toRaw">测试toRaw</button>
			<button @click="fun_markRaw">测试markRaw</button>
			<button @click="fun_markRaw_change">测试markRaw，修改markRaw数据</button>
		</div>
		<hr>
		<div>{{ bbb }}</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, ref,reactive , toRefs, toRaw, markRaw } from 'vue';
export default defineComponent({
	setup(){
		let data = reactive({
			name: '你大爷',
			job: {
				name: '前端'
			}
		})
		let methds = {
			fun_toRaw: ()=>{
				// toRaw 将代理对象变成普通对象
				let bbb = toRaw(data)
				bbb.name += '牛逼'
				
				// console.log('toRaw 将代理对象变成普通对象' )
				console.log('data', data )
				console.log('bbb', bbb )
			},
			fun_markRaw: ()=>{
				// markRaw 标记的数据对象以后都不能再成为代理对象
				data.job = markRaw({
					name: '前端markRaw'
				})
			},
			fun_markRaw_change: ()=>{
				data.job.name+='牛逼'
				console.log(data)
			}
		}
		return {
			data,
			...methds
		}
	}
});
</script>
